<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			#main{
				height: 500px;
				background-color: aquamarine;
			}
			#header{
				height: 10%;
				background-color: bisque;
			}
			#content{
				height: 80%;
				background-color: darkorchid;
			}
			#footer{
				height: 10%;
				background-color: chartreuse;
			}
			#one{
				position: absolute;
				height: 20px;
				width: 20px;
				background-color: #000000;
			}
			#two{
				height: 70px;
				width: 100%;
				background-color: black;
				float: left;
				margin-bottom: 10px;
			}
			#three{
				height: 70px;
				width: 40%;
				background-color: mediumaquamarine;
				margin: 0 auto;
			}
			#four{
				height: 70px;
				width: 100%;
				background-color: orangered;
				float: left;
			}
			#five{
				height: 70px;
				width: 40%;
				background-color:cornflowerblue;
				position: relative;
				left: 50%;
				transform:translate(-50%,0);
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="header"></div>
			
			<div id="content">
				
				<div id="two"><div id="three"></div>
				<div id="four"><div id="five"></div>
			</div>
			
			<div id="footer"></div>
			<div id="one"></div>
		</div>
	</body>
</html>
